<!--suppress ALL -->
<template>
<div class="page maintain-page" data-page="relateTaskList" style="z-index: 2">
  <div class="link-page-nav">
      <a href="#" class="link" @click="$root.backToTab()">
          <i class="iconfont icon-zuo"></i>
      </a>
  </div>
  <div class="link-page-top">
      <div class="link-page-title">添加维保任务</div>
  </div>
  <div class="link-page-tab">
      <div class="checkApply-tab" id="checkApply-select_{{getNewId}}">
          <a href="#" style="margin-right:10px;" class="checkApply-link active"  @click="selectCurrentType(0)">全部</a>
          <a href="#" style="margin-right:10px;" class="checkApply-link" @click="selectCurrentType(1)">维保巡查</a>
          <a href="#" style="margin-right:10px;" class="checkApply-link" @click="selectCurrentType(2)">保养</a>
          <a href="#" style="margin-right:10px;" class="checkApply-link" @click="selectCurrentType(3)">单点测试</a>
          <a href="#" style="margin-right:10px;" class="checkApply-link" @click="selectCurrentType(4)">联动测试</a>
      </div> 
  </div>
  <div class="page-content infinite-scroll-content ptr-content pdbottom120" style="margin-top: 0;"
        data-infinite-distance="50"  
        @infinite="loadMore" 
        @ptr:refresh="refreshMaintainList" id="page-content_{{getNewId}}">
        <div class="ptr-preloader">
            <div class="preloader color-multi"></div>
            <div class="ptr-arrow"></div>
        </div>
        <div class="list media-list" style="margin-top: 45px;">
            <ul class="relateTask_dataList" id="relateTask_dataList_{{getNewId}}"></ul>
           <div id="dataList_preloader_{{getNewId}}" class="preloader infinite-scroll-preloader"></div>
        </div>
  </div>
  <!-- <div class="popover select-option-list" id="dector_menu" style="width: 160px;top: 60px;">
      <div class="popover-angle"></div>
      <div class="popover-inner">
          <div class="list">
            <ul>
           
              <li><a href="" class="list-button item-link popover-close" id="select_dateRange" @click="getTbTime">选择日期范围</a></li>
              <li id="select_status" style="height:48px;">
                <a href="#" class="list-button item-link popover-close statusFilter" id="select_complete"  @click="filterStatus(1)">已完成</a>
                <a href="#" class="list-button item-link popover-close statusFilter" id="select_notComplete"  @click="filterStatus(0)">未完成</a>
              </li>
            </ul>
          </div>
      </div>
  </div> -->
  <div class="toolbar tabbar tabbar-labels toolbar-bottom-md" style="height: 60px;z-index: 9999;bottom:-1px !important;">
      <div class="toolbar-inner">
          <div class="tab-link selectAll">
            <label class="checkbox">
              <input type="checkbox" value="0" id="relateSelectAll_{{getNewId}}"/>
              <i class="icon-checkbox"></i>
              </label>
              &nbsp;&nbsp;全选
          </div>
          <a href="#" class="tab-link" >
              <span class="selectNum">已选选择 <i id="selectCheckNum_{{getNewId}}">0</i> 个</span>
          </a>
          <a href="" @click="addOwner" class="tab-link">
              <div class="addOwnerBtn">确定</div>
          </a>
      </div>
  </div>
</div>
</template>

<script>
return {
  mounted() {
    var self = this;
    self.taskArr = this.$route.params.taskId;
    self.currentOrgId = this.$route.params.orgId;
    if(self.taskArr != "0"){
      self.taskIds = this.$route.params.taskId;
    }
    },
    data: function() {
        return {
          pageSize: 25,//分页参数(每页显示条数)
          pageIndex: 0,//分页参数
          orgIds : 0,//联网单位编码，支持多单位，逗号拼接
          status : 0,//任务状态  1:全部  2：维保巡查 3：保养 4：联动测试 5:测试
          currentOrgId : "",
          taskIds:"", //选中的任务ID
          allowInfinite: true,
          taskList:{},
          getNewId: (new Date()).getTime()
        }
    },
    methods: {
        backToRefresh:function(){

        },
        //点击不同类型
        selectCurrentType:function(status){
          if(getClickEnabel()){
              let self = this;
              let $ = self.$$;
              self.status = status;
              //选择框变色
              $("#checkApply-select_"+self.getNewId+" .checkApply-link").removeClass('active').eq((status)).addClass('active');
              // $(".checkApply-page .tab-link-highlight").css("left",((status)==0?1:(status)*33.3333)+"%");
              $("#selectCheckNum_"+self.getNewId).html(0);
              //展示列表数据
              self.reInit();
              self.taskList={};
              self.getMaintainList();
          }
        },
        /*区分联网单位*/
        /* isMuilUnitUser:function(){
            var self = this;
            //单联网单位
            if (userInfor.isMuilUnitUser  == 0) {
               self.currentOrgId = userInfor.organizationIds;
            }else{//多联网单位
               if (single_Orgid == "") {
                 self.currentOrgId=userInfor.organizationIds;
               } else {
                 self.currentOrgId=single_Orgid;
               }
           }
        }, */
        //获取维保保养任务列表
        getMaintainList:function(){
            var self = this;
            Dao.selectRelateMainTainTaskList({
              queryType: 1,//分页参数 0：不分页 1：分页
              pageSize: self.pageSize,//分页参数(每页显示条数)
              pageIndex:self.pageIndex,//分页参数
              orgIds:self.currentOrgId,//self.currentOrgId  122 测试数据先写死  联网单位编码，支持多单位，逗号拼接  
              status:1,//任务状态   1：未开始和进行中   0：全部
              maintainType: self.status,  //1 维保巡查任务 2保养任务 3测试任务 4联动测试任务
            }, function (data,total) {
                if (data && data.length > 0){
                  if (self.pageSize * self.pageIndex + data.length < total) { //有分页
                      $("#dataList_preloader_"+self.getNewId).show();
                      self.allowInfinite = true;
                  } else {  //没分页
                      $("#dataList_preloader_"+self.getNewId).hide();
                      self.allowInfinite = false;
                  }
                  for (var i=0;i<data.length;i++) {
                    var maintainNames = data[i].maintainNames==null?"无":data[i].maintainNames;//任务责任人名称
                    var assetsCount = data[i].assetsCount; //资产数量
                    var finishCount = data[i].finishCount; //维保完成数量
                   
                    var percentage = "0%";
                    let percentageNum = Math.round((finishCount/assetsCount).toFixed(2)*100);
                    if(!isNaN(percentageNum)){
                        percentage = Math.round((finishCount/assetsCount).toFixed(2)*100).toString()+"%";
                    }
                    
                    var status = "未完成";
                    var statusCSS = "title-status-notComplete";
                    if(percentage =="100%"){
                        status="完成";
                        statusCSS = "title-status-complete";
                    }
                    var startTime = data[i].startTime;
                    var endTime = data[i].endTime;
                    if(startTime){
                      startTime =moment(startTime).format('YYYY/MM/DD');
                    }
                    if(endTime){
                      endTime =moment(endTime).format('YYYY/MM/DD');
                    }
                    
                    var maintainType = data[i].maintainType;
              var taskDetailUrl = "";//任务详情地址
                    if(maintainType==1){
                      taskDetailUrl="/maintainInspectDetail/"+data[i].id+"/0/";
                    }else if(maintainType==2){
                      taskDetailUrl="/maintainDetail/"+data[i].id+"/0/";
                    }else if(maintainType==3){
                      taskDetailUrl="/singleTestDetail/"+data[i].id+"/0/";
                    }else if(maintainType==4){
                      taskDetailUrl="/linkTestDetail/"+data[i].id+"/";
                    }
                    var maintainNames = data[i].maintainNames;//任务责任人名称
               if(maintainNames!=null){
                 var usersArr = maintainNames.split(",");
                     var workAccountNames= "无";
                     if(usersArr){
                      var usersSize = usersArr.length;
                      if(usersSize==1){
                        workAccountNames = usersArr[0]==""?"无":usersArr[0];
                      }else if(usersSize==2){
                        workAccountNames = usersArr[0]+"、"+usersArr[1];
                      }else if(usersSize>2){
                        workAccountNames = usersArr[0]+"、"+usersArr[1]+"、"+usersArr[2]+"等";
                      }
                     }
               }
              
              
                    var obj = {};
                    obj.id= data[i].id;
                    obj.name= data[i].name;
                    obj.status = data[i].status;
                    obj.maintainType = data[i].maintainType;
                    obj.startTime= startTime;
                    obj.endTime= endTime;
                    self.taskList[data[i].id]=obj;

                    var ck ="";
                    if(self.taskArr.indexOf(data[i].id+"")!=-1){
                      ck = 'checked="checked"';
                    }
                    
                    $("#relateTask_dataList_"+self.getNewId).append(`
                            <li>
                              <a href="`+taskDetailUrl+`" class="item-link item-content" data-view=".view-main">
                                <div class="item-inner">
                                  <div class="`+statusCSS+`">`+status+`</div>
                                  <div class="item-title-row">`+data[i].name+`</div>
                                  <div class="item-subtitle decter-mesage">
                                    <div style="float: left;">任务周期</div>
                                    <div class="taskCycleDate">`+startTime+`~`+endTime+`</div>
                                  </div>
                                  <div class="item-subtitle decter-mesage">
                                    <div style="float: left;">责任人</div>
                                    <div class="taskCycleDate" style="color: #333333;">`+workAccountNames+`</div>
                                </div>
                                </div>
                              </a>
                              <div class="decter-stuts-con" style="padding-left: 15px;">
                                <span class="left">
                                  <label class="checkbox dataList-checkbox" id="dataList-checkbox_`+self.getNewId+`">
                                        <input type="checkbox" `+ck+` value="`+data[i].id+`"/>
                                        <i class="icon-checkbox"></i>
                                      </label>
                                </span>
                              </div>
                            </li>`);
                  }
                  
                  var chks=$("#relateTask_dataList_"+self.getNewId+" input:checked").length;
                  $("#selectCheckNum_"+self.getNewId).html(chks);
                  if($("#dataList-checkbox_"+self.getNewId+" input").length==chks){
                    $("#relateSelectAll_"+self.getNewId).prop("checked", true);
                  }
                  
                  self.getSelectCheckBox();
                  self.initNoStart();
                }else{
                  self.allowInfinite = false;
                  $("#dataList_preloader_"+self.getNewId).hide();
                  //暂无数据
                  if (self.pageIndex == 0) {
                      $("#relateTask_dataList_"+self.getNewId).append(`<div class="no-data-img"><img src="`+listNoDataPic()+`"/></div>`);
                  }
                }
            });
        },
      
        //全选
        initNoStart:function(){
          let self = this;
          $("#relateSelectAll_"+self.getNewId).change(function(){
            self.taskIds="";
              if($("#relateSelectAll_"+self.getNewId).prop("checked")){
                  $("#dataList-checkbox_"+self.getNewId+" input").prop("checked", true);
                  $("#selectCheckNum_"+self.getNewId).html($("#dataList-checkbox_"+self.getNewId+" input").length);
              }else{
                  $("#dataList-checkbox_"+self.getNewId+" input").prop("checked", false);
                  $("#selectCheckNum_"+self.getNewId).html(0);
              } 
              let checkOwner = $("#dataList-checkbox_"+self.getNewId+" input:checked");
              let taskIdsStr = ""
              for ( let i = 0; i <checkOwner.length; i++){
                 let taskId = $(checkOwner[i]).val();
                 if(i<checkOwner.length-1){
                   taskId=taskId+",";
                 }
                 self.taskIds+=taskId;
              }
          });
        },
        //单个复选框选中事件
        getSelectCheckBox:function(){
          var self = this;
          $("#dataList-checkbox_"+self.getNewId+" input").change(function(e) {
            self.taskIds="";
              var chks=$("#relateTask_dataList_"+self.getNewId+" input:checked").length;
              $("#selectCheckNum_"+self.getNewId).html(chks);
              if($("#dataList-checkbox_"+self.getNewId+" input").length==chks){
                $("#relateSelectAll_"+self.getNewId).prop("checked", true);
              }else{
                $("#relateSelectAll_"+self.getNewId).prop("checked", false);
              }
              var checkOwner = $("#relateTask_dataList_"+self.getNewId+" input:checked");
              var taskIdsStr = ""
              for ( var i = 0; i <checkOwner.length; i++){
                var taskId = $(checkOwner[i]).val();
                if(i<checkOwner.length-1){
                  taskId=taskId+",";
                }
                self.taskIds+=taskId;
              }
          });
        },
        addOwner:function(){
            var self = this;
            if(self.taskIds==""){
              app.methods.showToastCenter('请选择任务');
              return;
            }
            var tempTaskList = {};
            var taskIdArr = self.taskIds.split(",");
            for(var i=0;i<taskIdArr.length;i++){
              if(self.taskList[taskIdArr[i]]!=null){
                tempTaskList[taskIdArr[i]] = self.taskList[taskIdArr[i]];
              }
            }
            app.methods.backToTab();
            app.view.current.el.f7View.router.currentPageEl.f7Component.addRelateTaskBak(tempTaskList);
        },
        loadMore:function(){
          var self = this;
          if (!self.allowInfinite) return;
            self.allowInfinite = false;
          setTimeout(function () {
            self.pageIndex++;
            self.getMaintainList();
            self.allowInfinite = true;
              }, 1000);
        },
        reInit:function(){
            var self = this;
            self.pageIndex = 0;
            $("#relateSelectAll_"+self.getNewId).prop("checked", false);
            $("#page-content_"+self.getNewId).scrollTop(0,300);
            $("#relateTask_dataList_"+self.getNewId).empty();
            if(!self.allowInfinite){
                self.allowInfinite = true;
                $('#dataList_preloader_'+self.getNewId).show();
            }
        },
        refreshMaintainList: function (e, done) {
            if (done && e) {
                var self = this;
                var $ = self.$$;
                setTimeout(function () {
                    self.reInit();
                    $('#dataList_preloader_'+self.getNewId).hide();
                    self.getMaintainList();
                    done();
                }, 1000);
            }
        },
    },
    on: {
        pageInit: function(e, page) {
            var self = this;
            var $ = self.$;
            self.pageIndex = 0;
            self.reInit();
            //区分联网单位
            //self.isMuilUnitUser();
            //列表
            self.getMaintainList();
        },
        pageAfterIn: function(e, page) {
            var self = this;
            var $ = self.$;
        },
    }
}
</script>